<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">
      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="userQuery.userName" placeholder="用户名称"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="userQuery.userInfo" placeholder="用户信息" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="userQuery.userJob" placeholder="用户职位" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="userQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>
    </a-space>

    <a-row justify="start" style="padding: 0 10px">
      <a-space size="small">
        <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
        <a-col :span="1"><a-button type="outline" @click="deleteClick(null)" status="danger" :disabled="selectList.length == 0">删除</a-button></a-col>
      </a-space>
    </a-row>

    <a-table :data="data" row-key="id" :row-selection="selectList"
             :scroll="scroll" :scrollbar="scrollbar"
             v-model:selectedKeys="selectList" :pagination="false"
             style="background-color: white;">
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column ellipsis="true" title="名称" data-index="userName"></a-table-column>
        <a-table-column ellipsis="true" title="信息" data-index="userInfo"></a-table-column>
        <a-table-column title="头像" data-index="file[0].clientUrl">

          <template #cell="{record}">
            <a-image height="80"
                     width="80"
                     :src=" url + record.file[0].clientUrl">
            </a-image>
          </template>

        </a-table-column>
        <a-table-column ellipsis="true" title="职位" data-index="userJob"></a-table-column>
        <a-table-column title="状态" data-index="status">
          <template #cell="{record}">
            <a-tag v-if="record.status == 1" color="green">上架</a-tag>
            <a-tag v-if="record.status == 0" color="red">下架</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="上传人" data-index="uploader"></a-table-column>
        <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
        <a-table-column title="操作">
          <template #cell="{record}">
            <a-button type="text" @click="updataClick(record)">修改</a-button>
            <a-button type="text" @click="deleteClick(record)" status="danger">删除</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="userQuery.pageNum" :total="userQuery.total"
                      v-model:page-size="userQuery.pageSize" @page-size-userQuery="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>
    </a-table>


    <UserFormData  ref="sampleFormData"
                       v-model:vis="visible"
                       v-model:dto="userDto"
                       v-model:tit="title"
                       v-model:api="api"
                       v-model:src="src"
                       @ok="getList"
    >
    </UserFormData>






  </div>

</template>

<script lang="ts" setup>



import type {Reactive} from "vue-demi";
import {ref} from 'vue';
import type {Ref} from "vue-demi";
import {Notification} from "@arco-design/web-vue";
import type {UserDto, UserQuery} from "@/apis/sample/user";
import UserFormData from "@/views/sample/user/UserFormData.vue";
import {useUserStore} from "@/stores";
import {delUser, queryUser, QueryUserById} from "@/apis/sample/user";


const url = import.meta.env.VITE_API_BASE_URL;
const src:Ref<string> = ref("")

const selectList = ref([])
const data:Ref<UserDto[]> = ref([])
const visible = ref(false);



const title = ref('')
const scrollbar = ref(true);
const api = ref('')
const scroll = {
  x: 1200,
  y: 650
};



const userQuery:Reactive<UserQuery> = reactive({
  id:null,
  userName:null,
  userInfo:null,
  userJob:null,
  uploader:null,
  pageNum:1,
  pageSize:10,
  total:0,
  status:null,
})

const userDto:Reactive<UserDto> = reactive({
  id:0,
  userName:'',
  userInfo:'',
  userImg:'',
  userJob:'',
  uploader:useUserStore().userInfo.id,
  updateTime:'',
  status:null,
})

/**
 * 新增按钮
 * */
const handleClick = () => {
  title.value = '新增用户列表'
  api.value = 'add'


  visible.value = true;

}

/**
 * 修改按钮
 * */
const updataClick = (data:any) => {
  console.log(data)
  title.value = '修改用户列表'
  api.value = 'up'

  if (data == '0'){
    up(selectList.value)
  }else {

    userDto.id = data.id
    userDto.userName = data.userName
    userDto.userInfo = data.userInfo
    userDto.userImg = data.userImg
    userDto.userJob = data.userJob
    userDto.status = data.status
    userDto.uploader = useUserStore().userInfo.id
    userDto.updateTime = data.updateTime
    src.value = url +  data.file[0].clientUrl

  }
  console.log('--------------------------')
  visible.value = true;
}

/**
 *  删除按钮
 * */
const deleteClick = (data:any) => {

  if (data == null){

    delUser(selectList.value).then(res =>{
      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })

  }else {

    delUser([data.id]).then(res =>{
      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })


  }
}

/**
 * 获得列表
 * */
const getList =  () => {
  queryUser(userQuery).then(res =>{
    console.log(res)
    data.value = res.data.data.records
    userQuery.total = res.data.data.total
  })

}


const up =  (data:any) =>{

  QueryUserById(data).then(res =>{
    console.log(res)

    userDto.id = res.data.data.id
    userDto.userName = res.data.data.userName
    userDto.userInfo = res.data.data.userInfo
    userDto.userImg = res.data.data.userImg
    userDto.userJob = res.data.data.userJob
    userDto.status = res.data.data.status
    userDto.uploader = res.data.data.uploader
    userDto.updateTime = res.data.data.updateTime
    src.value = url +  res.data.data.records.file[0].clientUrl
  })


}

getList()

</script>

<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}

.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>